<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hello vue</title>
<style type="text/css">

</style>
</head>
<body>







<div id="app">
  
  <counter></counter>
  <hr>
  <counter></counter>
    
</div>



<template id="mycom1">
	<div>
		<input type="button" value="+1" @click="increment">
		<h2>{{ count }}</h2>
	</div>
	
</template>







<br>
<script src="vue.js"></script>

<script type="text/javascript">


	var dataObj = { count:0 }


//这是一个计数器的组件，点击按钮让count值加一
	Vue.component('counter',{

		template:"#mycom1",
		data: function(){//组件中的方法必须是一个方法，且必须返回一个对象
			// return dataObj
			 return { count:0 }
		},
		methods:{
			increment(){
				this.count++
			},

		}
	})//组件的全部方法元素



var app = new Vue({
  el: '#app',

  data: {
  	 
  },

  methods:{

  }

})





</script>

	
</body>
</html>